<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <%= title %>
    </title>
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>

<body>
    <div class="container">
        <header>
            <h1>
                <%= title %>
            </h1>
        </header>

        <main>
            <div class="actions">
                <a href="/student/list" class="btn btn-secondary">返回学生列表</a>
                <a href="/student/template" class="btn btn-info">下载导入模板</a>
            </div>

            <!-- 消息提示 -->
            <% if (typeof message !== 'undefined' && message) { %>
                <div class="alert alert-success">
                    <%= message %>
                </div>
                <% } %>

                    <% if (typeof error !== 'undefined' && error) { %>
                        <div class="alert alert-error">
                            <%= error %>
                        </div>
                        <% } %>

                            <div class="import-container">
                                <!-- 导入说明 -->
                                <div class="import-instructions">
                                    <h3>📋 导入说明</h3>
                                    <div class="instruction-content">
                                        <div class="step">
                                            <div class="step-number">1</div>
                                            <div class="step-content">
                                                <h4>下载模板</h4>
                                                <p>点击"下载导入模板"按钮，获取标准的Excel导入模板文件</p>
                                            </div>
                                        </div>

                                        <div class="step">
                                            <div class="step-number">2</div>
                                            <div class="step-content">
                                                <h4>填写数据</h4>
                                                <p>在模板中填写学生信息，请严格按照以下格式：</p>
                                                <ul>
                                                    <li><strong>姓名：</strong>不能为空，文本格式</li>
                                                    <li><strong>年龄：</strong>1-150之间的整数</li>
                                                    <li><strong>性别：</strong>只能填写"男"或"女"</li>
                                                    <li><strong>专业：</strong>不能为空，文本格式</li>
                                                    <li><strong>成绩：</strong>0-100之间的数字，可以有小数</li>
                                                </ul>
                                            </div>
                                        </div>

                                        <div class="step">
                                            <div class="step-number">3</div>
                                            <div class="step-content">
                                                <h4>上传文件</h4>
                                                <p>选择填写好的Excel文件(.xlsx或.xls格式)，点击导入按钮</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 文件上传区域 -->
                                <div class="upload-section">
                                    <h3>📁 选择文件</h3>
                                    <form action="/student/import" method="POST" enctype="multipart/form-data" class="upload-form">
                                        <div class="upload-area" id="uploadArea">
                                            <div class="upload-icon">📄</div>
                                            <div class="upload-text">
                                                <p class="upload-main">拖拽Excel文件到这里 或 <span class="upload-link">点击选择</span></p>
                                                <p class="upload-hint">支持 .xlsx 和 .xls 格式，最大 5MB</p>
                                            </div>
                                            <input type="file" name="excelFile" id="fileInput" accept=".xlsx,.xls" required style="display: none;">
                                        </div>

                                        <div class="file-info" id="fileInfo" style="display: none;">
                                            <div class="file-details">
                                                <span class="file-icon">📋</span>
                                                <span class="file-name" id="fileName"></span>
                                                <span class="file-size" id="fileSize"></span>
                                            </div>
                                            <button type="button" class="remove-file" id="removeFile">❌</button>
                                        </div>

                                        <div class="form-actions">
                                            <button type="submit" class="btn btn-primary" id="importBtn" disabled>
                                开始导入
                            </button>
                                            <button type="button" class="btn btn-secondary" onclick="location.reload()">
                                重置
                            </button>
                                        </div>
                                    </form>
                                </div>

                                <!-- 导入提示 -->
                                <div class="import-tips">
                                    <h3>💡 温馨提示</h3>
                                    <ul>
                                        <li>导入前请先备份重要数据</li>
                                        <li>重复的数据将被添加为新记录</li>
                                        <li>如果部分数据导入失败，成功的数据仍会保存</li>
                                        <li>建议每次导入不超过1000条记录</li>
                                        <li>请确保Excel文件没有被其他程序占用</li>
                                    </ul>
                                </div>
                            </div>
        </main>

        <footer>
            <p>&copy; 2025 学生信息管理系统(小何技术支持)</p>
        </footer>
    </div>

    <script>
        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('fileInput');
        const fileInfo = document.getElementById('fileInfo');
        const fileName = document.getElementById('fileName');
        const fileSize = document.getElementById('fileSize');
        const removeFile = document.getElementById('removeFile');
        const importBtn = document.getElementById('importBtn');

        // 点击上传区域触发文件选择
        uploadArea.addEventListener('click', () => {
            fileInput.click();
        });

        // 拖拽功能
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragover');
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');

            const files = e.dataTransfer.files;
            if (files.length > 0) {
                const file = files[0];
                if (isValidFile(file)) {
                    fileInput.files = files;
                    showFileInfo(file);
                } else {
                    alert('请选择有效的Excel文件(.xlsx或.xls格式，最大5MB)');
                }
            }
        });

        // 文件选择处理
        fileInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                if (isValidFile(file)) {
                    showFileInfo(file);
                } else {
                    alert('请选择有效的Excel文件(.xlsx或.xls格式，最大5MB)');
                    fileInput.value = '';
                }
            }
        });

        // 移除文件
        removeFile.addEventListener('click', () => {
            fileInput.value = '';
            hideFileInfo();
        });

        // 验证文件
        function isValidFile(file) {
            const allowedTypes = [
                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                'application/vnd.ms-excel'
            ];
            const maxSize = 5 * 1024 * 1024; // 5MB

            return allowedTypes.includes(file.type) && file.size <= maxSize;
        }

        // 显示文件信息
        function showFileInfo(file) {
            fileName.textContent = file.name;
            fileSize.textContent = formatFileSize(file.size);

            uploadArea.style.display = 'none';
            fileInfo.style.display = 'flex';
            importBtn.disabled = false;
        }

        // 隐藏文件信息
        function hideFileInfo() {
            uploadArea.style.display = 'flex';
            fileInfo.style.display = 'none';
            importBtn.disabled = true;
        }

        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';

            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));

            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

        // 提交前确认
        document.querySelector('.upload-form').addEventListener('submit', (e) => {
            if (!confirm('确定要导入选中的文件吗？导入过程中请不要关闭页面。')) {
                e.preventDefault();
            } else {
                importBtn.textContent = '导入中...';
                importBtn.disabled = true;
            }
        });
    </script>
</body>

</html>